<template>
  <div v-if="mode == 'vertical'">
    <div
      >同比<span class="icon-arrow">
        <ve-icon v-if="tb > 0" name="rs_up1" width="12" height="24"></ve-icon>
        <ve-icon v-if="tb < 0" name="rs_down1" width="12" height="24"></ve-icon>
      </span>
      <span class="rate-value">
        <span v-if="tb">{{ Math.abs(tb) }}%</span>
        <span v-else>0%</span>
      </span>
    </div>
    <div style="margin-top: 16rpx"
      >环比<span class="icon-arrow">
        <ve-icon v-if="hb > 0" name="rs_up1" width="12" height="24"></ve-icon>
        <ve-icon v-if="hb < 0" name="rs_down1" width="12" height="24"></ve-icon>
      </span>
      <span class="rate-value">
        <span v-if="hb">{{ Math.abs(hb) }}%</span>
        <span v-else>0%</span>
      </span>
    </div>
  </div>
  <div class="card-rate white-color" v-else-if="mode == 'whiteColor'">
    <span style="margin-right: 36rpx"
      >同比<span class="icon-arrow">
        <ve-icon v-if="tb > 0" name="rs_up1" width="13" height="24"></ve-icon>
        <ve-icon v-if="tb < 0" name="rs_down1" width="13" height="24"></ve-icon>
      </span>
      <span class="rate-value">
        <span v-if="tb">{{ Math.abs(tb) }}%</span>
        <span v-else>0%</span>
      </span>
    </span>
    <span style="white-space: nowrap"
      >环比<span class="icon-arrow">
        <ve-icon v-if="hb > 0" name="rs_up1" width="13" height="24"></ve-icon>
        <ve-icon v-if="hb < 0" name="rs_down1" width="13" height="24"></ve-icon>
      </span>
      <span class="rate-value">
        <span v-if="hb">{{ Math.abs(hb) }}%</span>
        <span v-else>0%</span>
      </span>
    </span>
  </div>
  <span class="card-rate" v-else>
    <span style="margin-right: 36rpx"
      >同比<span :class="{ green: tb > 0, red: tb < 0 }">
        <span class="icon-arrow">
          <ve-icon v-if="tb > 0" name="rs_up" width="12" height="24"></ve-icon>
          <ve-icon v-if="tb < 0" name="rs_down" width="12" height="24"></ve-icon>
        </span>
        <span class="rate-value">
          <span v-if="tb">{{ Math.abs(tb) }}%</span>
          <span v-else>0%</span>
        </span>
      </span></span
    >
    <span style="white-space: nowrap"
      >环比<span :class="{ green: hb > 0, red: hb < 0 }">
        <span class="icon-arrow">
          <ve-icon v-if="hb > 0" name="rs_up" width="12" height="24"></ve-icon>
          <ve-icon v-if="hb < 0" name="rs_down" width="12" height="24"></ve-icon>
        </span>
        <span class="rate-value">
          <span v-if="hb">{{ Math.abs(hb) }}%</span>
          <span v-else>0%</span>
        </span>
      </span>
    </span>
  </span>
</template>

<script setup name="CardRate">
  const props = defineProps({
    tb: [String, Number],
    hb: [String, Number],
    mode: String, // vertical, whiteColor, default
  })
</script>

<style lang="less" scoped>
  .card-rate {
    font-weight: 400;
    font-size: 24rpx;
    color: #1d2129;
    line-height: 34rpx;
    &.white-color {
      color: #fff;
      margin: 12rpx 0;
    }
  }
  .green {
    color: #00b42a;
  }
  .red {
    color: #f53f3f;
  }
  .icon-arrow {
    margin: 0 4rpx;
    vertical-align: 0;
  }
</style>
